<template>
  <div class="page-content">
    <Table
      :listData="listData"
      :listCount="listCount"
      v-bind="tableConfig"
      @selectionChange="selectionChange"
      v-model:page="pageInfo"
    >
      <template #createAt="scope">
        <span>{{ $filters.formatTime(scope.row.createAt) }}</span>
      </template>
      <template #updateAt="scope">
        <span>{{ $filters.formatTime(scope.row.updateAt) }}</span>
      </template>
      <template #operate="scope">
        <div class="handle-btns">
          <el-button link type="primary" v-if="isUpdate" @click="editPageData(scope.row)"
            ><el-icon><EditPen /></el-icon>编辑</el-button
          >
          <el-button
            link
            type="primary"
            v-if="isDelete"
            @click="deletePageData(scope.row)"
            ><el-icon><Delete /></el-icon>删除</el-button
          >
        </div>
      </template>
      <template v-for="item in otherPropSlots" :key="item.prop" #[item.slotName]="scope">
        <template v-if="item.slotName">
          <slot :name="item.slotName" :row="scope.row"></slot>
        </template>
      </template>
      <template #handler>
        <el-button v-if="isCreate" type="primary" @click="newPageData">{{
          tableConfig.handleName
        }}</el-button>
      </template>
    </Table>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, computed, defineExpose, ref, watch, defineEmits } from 'vue'
import { useStore } from 'vuex'
import Table from '@/base-ui/table'
import { EditPen, Delete } from '@element-plus/icons-vue'
import { usePermission } from '@/hooks/use-permission'

const props = defineProps({
  tableConfig: {
    type: Object as any,
    require: true
  },
  pageName: {
    type: String,
    required: true
  }
})
const store = useStore()
const emit = defineEmits(['editPageData', 'newPageData'])

const isCreate = usePermission(props.pageName, 'create')
const isUpdate = usePermission(props.pageName, 'update')
const isDelete = usePermission(props.pageName, 'delete')
const isQuery = usePermission(props.pageName, 'query')

// 分页器
const pageInfo = ref({ currentPage: 1, pageSize: 10 })
watch(pageInfo, () => getData())

// vuex中请求数据
const getData = (searchInfo: any = {}) => {
  if (!isQuery) return
  store.dispatch('system/getPageListAction', {
    pageName: props.pageName,
    queryInfo: {
      offset: (pageInfo.value.currentPage - 1) * pageInfo.value.pageSize,
      size: pageInfo.value.pageSize,
      ...searchInfo
    }
  })
}
getData()

// 从getters中获取网络请求后的数据
const listData = computed(() => store.getters['system/pageListData'](props.pageName))
const listCount = computed(() => store.getters['system/pageListCount'](props.pageName))
// const userCount = computed(() => store.state.system.userCount)
const selectionChange = () => {
  console.log('中间页')
}

const otherPropSlots: any[] = props.tableConfig.propList.filter((item: any) => {
  if (item.slotName === 'createAt') return false
  if (item.slotName === 'updateAt') return false
  if (item.slotName === 'operate') return false
  if (item.slotName === 'handler') return false
  return true
})

//删除、编辑、新建
const deletePageData = (item: any) => {
  store.dispatch('system/deletePageDataAction', { pageName: props.pageName, id: item.id })
}
const editPageData = (item: any) => {
  emit('editPageData', item)
}
const newPageData = () => {
  emit('newPageData')
}

defineExpose({ getData })
</script>

<style lang="less" scoped>
.page-content {
  border-top: 20px solid #f0f2f5;
  padding: 20px 30px;
}
</style>
